<template>
  <div id="payment_container">
    <header-nav headTitle="Payment" go-back="true"></header-nav>
    <h3 class="title">Address</h3>
    <section class="address" v-if="cartData">
      <div class="address-cnt">
        <p>Name: {{cartData.cart.address.name}}</p>
        <p>Mobile: {{cartData.cart.address.mobile}}</p>
        <p>Email: {{cartData.cart.address.email}}</p>
        <p>Address: {{cartData.cart.address.address}}</p>
      </div>
    </section>
    <section class="curpayment" v-if="cartInfoList.length">
      <ul>
        <li v-for="(item, index) in cartInfoList" :key="index">
          <img :src="productBaseUrl + item.image" alt="">
          <div class="group">
            <span>{{ item.name }}</span>
            <p class="bold">Quantity: {{ item.quantity }}</p>
            <p class="orange">Price: ￥{{ item.price }}</p>
          </div>
        </li>
      </ul>
      <section>
        <div class="cart_total_price">
          <p>Deliver fee</p>
          <p>￥ {{ cartData.cart.extras[0].price}}</p>
        </div>
        <p class="cart_total_price">Only support offline payment</p>
        <div class="cart_total_price">
          <p>TOTAL</p>
          <p class="orange">￥ {{ cartData.cart.total_price }}</p>
        </div>
      </section>

      <button class="login_btn" @click.prevent="gotoOrder()">Payment</button>
    </section>
    <section class="unpayment" v-if="unpaymentCartList.length">
      <h3 class="title">Unpaid List</h3>
      <ul>
        <li v-for="(item, index) in unpaymentCartList" :key="index" class="cart_unpaid">
          <p class="subtitle">{{item.cart.time}}</p>
          <ul class="pro_list">
            <router-link tag="li"  v-for="(subitem, index) in item.cart.groups" :key="index"
                          :to="{path: '/detail', query: {product_id: subitem.product_id}}">
              <img :src="productBaseUrl + subitem.image" alt="">
              <span>{{ subitem.name }}</span>
            </router-link>
          </ul>
          <!--<p class="delete_btn" @click="deleteCart(item.cart_id)">Delete</p>-->
        </li>
      </ul>
    </section>
    <alert-tip v-show="showAlert" :alertText="alertText" @closeTip="closeTip"></alert-tip>
  </div>
</template>

<script>
  import {mapState, mapMutations} from 'vuex'
  import HeaderNav from '../../components/HeaderNav.vue'
  import AlertTip from '../../components/AlertTip.vue'
  import { getCartInfo, getCartList, deleteCartInfo, addOrder } from '../../service/getData'
  import { getStore } from '../../config/mUtils'
  export default {
    data() {
      return {
        showAlert: false,
        alertText: null,
        cartData : null,
        cartInfoList: [],
        unpaymentCartList: [],
        productBaseUrl: 'https://s3.cn-north-1.amazonaws.com.cn/cdn.smartbuyglasses.cn/image/en/images/',
      }
    },
    components: {
      HeaderNav,
      AlertTip
    },
    created() {
    	this.initData()
    },
    methods: {
      async initData() {
        const user_id = Number(getStore('user_id'))
        const cart_id = this.$route.query.cart_id
        await getCartInfo(user_id, cart_id).then(res => {
          if(res.data.cart_id) {
          	this.cartData = res.data;
            this.cartInfoList = res.data.cart.groups
            console.log('cur cart info',this.cartInfoList)
          }
        })
        await getCartList(user_id, cart_id).then(res => {
          if(res.data.length) {
            this.unpaymentCartList = res.data;
            console.log('unpayment', this.unpaymentCartList)
          }
        })
      },
      async deleteCart(cart_id) {
        const user_id = Number(getStore('user_id'))
      	await deleteCartInfo(user_id, cart_id).then(res => {
      		if(res.data) {
            this.showAlert = true
            this.alertText = res.data.message
            this.initData()
          }
        })
      },
      async gotoOrder() {
        let total = this.cartData.cart.total_price,
          cart = {
            cart_id: this.cartData.cart_id,
            groups: this.cartData.cart.groups},
          address = this.cartData.cart.address;
      	await addOrder(total , cart, address).then(res=> {
          let order_id = res.data.id;
          console.log(res.data.id)
          if(order_id) {
            this.$router.push({path: '/order', query: {order_id}})
          }
        })
//      	console.log(order_id)
//        await this.deleteCart(this.cartData.cart_id).then(res => {
//          if(res.data.status == 1) {
//            this.showAlert = true
//            this.alertText = res.data.message
//            this.$router.push({path: '/order', query: {order_id: cur_order_id}})
//          }
//        })
      },
      closeTip() {
        this.showAlert = false;
      }
    },
    watch: {}
  }
</script>

<style lang="scss" scoped>
  @import '../../style/mixin';
  #payment_container {
    padding-top: 1.9rem;
    @include sc(0.65rem , #434343);
    @include sc(0.55rem, #434343);
  }
  .curpayment {
    padding: 0.2rem 0 0.4rem;
    ul {
      li {
        margin-bottom: 0.25rem;
        background-color: #fff;
        @include fj;
        align-items: center;
        img {
          width: 45%;
        }
        justify-content: flex-start;
        .bold {
          font-weight: bold;
        }
      }
    }
  }
  .cart_total_price {
    width: 100%;
    margin:10px auto 0;
    padding:0.5rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
  }
  .orange {
    font-size: 0.65rem;
    color: #f9b233;
  }
  .title {
    padding: 0 5%;
    margin-top: 0.2rem;
    background-color: #fff;
    @include sc(0.65rem, #434343);
    line-height: 1.6rem;
    text-transform: uppercase;
  }
  .address {
    width: 90%;
    padding:0.3rem 0;
    margin: 0 auto;
    @include fj;
    align-items: center;
    .address_btn {
      text-decoration: underline;
      color: $blue;
    }
  }
  .cart_unpaid {
    background-color: #fff;
    margin: 0.15rem auto;
    padding:0.3rem 5%;
    li {
    }
  }
  .pro_list {
    li {
      display: flex;
      align-items: center;
      img {
        width: 60px;
      }
    }
  }
  .login_btn {
    display: block;
    width: 100%;
    background-color: #7ec801;
    text-transform: uppercase;
    color: #fff;
    height: 1.62962rem;
    line-height: 1.62962rem;
    font-size: 0.63703rem;
    text-align: center;
    margin-top: 0.66667rem;
    font-family: Helvetica, arial;
    border-radius: 10px;
  }
  .delete_btn {
    display: block;
    width: 100%;
    background-color: #999;
    text-transform: uppercase;
    color: #fff;
    height: 1.62962rem;
    line-height: 1.62962rem;
    font-size: 0.63703rem;
    text-align: center;
    margin-top: 0.66667rem;
    font-family: Helvetica, arial;
    border-radius: 10px;
  }
</style>
